<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无订单数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="互动消息" height="50"></u-navbar>
      </view>
      <view class="" style="padding: 20rpx">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="box-left">
            <u-avatar
              style="align-self: center"
              src="../../static/img/xt.png"
              size="100"
            ></u-avatar>
          </view>
          <view class="box-right">
            <view class="" style="display: inline-block; position: relative">
              <view class=""> 用户昵称888 </view>
            </view>
            <p>回复：很不错的视频很不错的视频 <text class="time">10-25</text></p>
            <view class="reply-btn">
              <u-avatar src="" size="45"></u-avatar>
              <text>回复评论</text>
            </view>
          </view>
          <view class="box-video-cover">
            <u-icon name="" size="135"></u-icon>
          </view>
        </view>

        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="box-left">
            <u-avatar
              style="align-self: center"
              src="../../static/img/xt.png"
              size="100"
            ></u-avatar>
          </view>
          <view class="box-right">
            <view class="" style="display: inline-block; position: relative">
              <view class=""> 用户昵称888 </view>
            </view>
            <p>点赞了你的视频 <text class="time">10-25</text></p>
          </view>
          <view class="box-video-cover">
            <u-icon name="" size="135"></u-icon>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      itemList: [{}, {}]
    }
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize)
    },
    initData(page, pageSize) {
      //let self = this;
      // self.$u.api.getOrderList({
      // 	limit: pageSize,
      // 	page: page,
      // 	status: status
      // }).then(res => {
      // 	self.onOrderLoad(self.current, res.list, false);
      // }).catch(res => {
      // 	self.onOrderLoad(self.current, null, false);
      // });
      //this.onOrderLoad(this.current, this.itemList, false);
    }
  }
}
</script>

<style>
page {
  background: #f7f7f7;
  padding: 20rpx;
}
.message-box {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.box-right {
  width: 100%;
  margin-top: 10rpx;
  margin-left: 15rpx;
  font-size: 33rpx;
  line-height: 57rpx;
  position: relative;
}

.box-right p {
  font-size: 28rpx;
  color: #999999;
}

.right-more {
  position: absolute;
  right: 2rpx;
  top: 35rpx;
}

.reply-btn {
  width: 180rpx;
  border-radius: 45rpx;
  background-color: #f5f5f5;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.time {
  margin-left: 20rpx;
}
</style>
